<template>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" :width="dialogInfo.width" align-center>
    <h2 class="t-c text-white"> 2022年第一学期 第1周 YG09-102教室 周五 </h2>
    <h2 class="t-c text-white">第2节 第3节</h2>

    <el-form :model="formModel" ref="formRef" label-width="120px" class="demo-dynamic">
      <el-card class="mt-3 card_bg" shadow="never" v-for="(item, index) in formModel.timetable" :key="index">
        <template #header>
          <h4 class="m-0">第{{index+1}}节</h4>
        </template>
        <el-row>
          <el-col :span="12">
            <el-form-item label="教师姓名" :prop="'timetable.' + index + '.teachers'" :rules="formRules.teachers">
              <el-input class="w100" v-model="item.teachers" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程" :prop="'timetable.' + index + '.course'" :rules="formRules.course">
              <el-input class="w100" v-model="item.course" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>

        </el-row>
      </el-card>

    </el-form>

    <template #footer>
      <span class="dialog-footer">

        <el-button type="info" plain @click="onCancel()">取消</el-button>
        <el-button type="primary" @click="onSubmit()">提交</el-button>
      </span>
    </template>

  </el-dialog>
</template>

  <script setup>
/**
* 文章管理编辑组件
*/
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { RegRule } from '@/utils/EsValidate';
import ImageUpload from '@/components/upload/ImageUpload.vue';

// ======================================================
//                      变量声明
// ======================================================

// emit
const emit = defineEmits(['success']);
// 表单数据
const formAttrs = {
  type: 2,
  teachers: '',
  course: '',
  classRoom: '',
  startWeek: '',
  endWeek: '',
  weekType: '',
  sort: 0
};
// 弹窗信息
const dialogInfo = ref({
  visible: false,
  title: '',
  width: '800px',
})
// 表单组件的引用实例
const formRef = ref(null);
// 加载状态

// 选项数据
// 分类ID树形选项数据
const optionsOfCategoryId = ref([]);
// 是否热门选项数据
const optionsOfIsHot = ref({});
// 是否推荐选项数据
const optionsOfIsRecommend = ref({});
// 状态选项数据
const optionsOfStatus = ref({});

// 表单校验规则
const formRules = ref({
  teachers: [
    {
      required: true, message: '请输入教师', trigger: 'blur'
    }
  ],
  course: [
    {
      required: true, message: '请输入课程', trigger: 'blur'
    },
  ]
})


const formModel = ref({
  timetable: [
    {
      ...Object.assign({}, formAttrs)
    },
    {
      ...Object.assign({}, formAttrs)
    },
    {
      ...Object.assign({}, formAttrs)
    }
  ],
})



// ======================================================
//                      点击操作
// ======================================================

// 点击提交按钮
const onSubmit = () => {
  console.log('[编辑表单] onSubmit formModel =', formModel.value);
  formRef.value.validate((valid, fields) => {
    if (!valid) {
      console.log('表单校验失败：', fields);
      return;
    }
    EsAjax.post(ApiUrls.timetableCreate, formModel.value).then(res => {
      if (res.data.code !== 200) {
        ElMessage.warning(res.data.msg);
        return;
      }
      dialogInfo.value.visible = false;
      emit('success');
    }).catch(err => {
      ElMessage.error('网络错误：' + err.message);
    })
  })
}

// 点击重置表单按钮
const onReset = () => {
  ElMessageBox.confirm('确定要重置表单数据吗？').then(() => {
    formRef.value.resetFields();
  }).catch(() => { })
}

// 点击取消按钮
const onCancel = () => {
  formModel.value = Object.assign({}, formAttrs);
  formRef.value.resetFields();
  dialogInfo.value.visible = false;
}

// ======================================================
//                      处理事件
// ======================================================


// 加载数据
const show = (id, title, item = [], width = '800px') => {
  console.log(id, title, item, width)
  dialogInfo.value.title = title;
  dialogInfo.value.width = width;
  dialogInfo.value.visible = true;


}

defineExpose({
  show
})
  </script>
